<template>
	<view>
		<view class="background"></view>
		<image class="backimg" v-if="user_status != 2" src="https://hfd.bjlzkj.com/static/index/background.png"
			mode="widthFix"></image>
		<navView is_logo="https://hfd.bjlzkj.com/static/logo.png" v-if="user_status == 2"></navView>
		<navView :is_input="true" :is_btn="true" backgroundColor="transparent" :state="user_status" @onSearch="onSearch"
			v-if="user_status != 2"></navView>
		<view class="container" v-if="user_status == 2">
			<view class="swiperbox">
				<swiper class="swiper" @change="swiperChange" :current="current" circular :autoplay="true"
					:interval="3000" :duration="duration">
					<swiper-item v-for="(item, index) in banner" :key="index" @tap="$navTo(item.url)">
						<image :src="item.bannerimage" mode=""></image>
					</swiper-item>
				</swiper>
				<view class="splic">
					<view class="text">
						{{ banner[current].title }}
					</view>
					<view class="zhi">
						<view :class="current == index ? 'zhi-item2' : 'zhi-item1'" v-for="(item, index) in banner">
						</view>
					</view>
				</view>
			</view>
			<view class="projectbox">
				<view class="project" @tap="$navTo('/pages/projectList/projectList')">
					<view class="title">
						项目列表
					</view>
					<view class="span">
						查看项目
					</view>
					<image class="right" src="https://hfd.bjlzkj.com/static/index/right3.png" mode=""></image>
					<image class="form" src="https://hfd.bjlzkj.com/static/index/form1.png" mode=""></image>
				</view>
				<view class="right">
					<view class="project2" @tap="$navTo('/subpkg/contract/contractList/contractList')">
						<view class="title">
							合同付款
						</view>
						<view class="span">
							查看列表
						</view>
						<image class="right" src="https://hfd.bjlzkj.com/static/index/right1.png" mode=""></image>
						<image class="form" src="https://hfd.bjlzkj.com/static/index/form2.png" mode=""></image>
					</view>
					<view class="project2" style="background: #fef8f5;" @tap="$navTo('/pages/knowledge/knowledge')">
						<view class="title">
							知识产权
						</view>
						<view class="span">
							掌握知识产权
						</view>
						<image class="right" src="https://hfd.bjlzkj.com/static/index/right2.png" mode=""></image>
						<image class="form" src="https://hfd.bjlzkj.com/static/index/form3.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="cardList">
				<view class="carditem" @tap="$navTo('/pages/company/company')">
					<image class="banner" src="https://hfd.bjlzkj.com/static/index/banner1.png" mode=""></image>
					<view class="title">
						公司简介
					</view>
					<button class="btn1">去查看</button>
				</view>
				<view class="carditem" @tap="$navTo('/pages/Bonus/Bonus')">
					<image class="banner" src="https://hfd.bjlzkj.com/static/index/banner2.png" mode=""></image>
					<view class="title">
						积分返利
					</view>
					<button class="btn2">去查看</button>
				</view>
				<view class="carditem" @tap="$navTo('/pages/upfile/upfile')">
					<image class="banner" src="https://hfd.bjlzkj.com/static/index/banner3.png" mode=""></image>
					<view class="title">
						资料上传
					</view>
					<button class="btn3">去查看</button>
				</view>
			</view>
			<view class="jourList">
				<view class="title">
					新闻资讯
					<view class="cha" @tap="$navTo('/pages/newsList/newsList')">
						查看更多
					</view>
				</view>
				<view class="item" v-for="(item, index) in selsectlist" :key="index"
					@tap="$navTo('/pages/news/news?id=' + item.id)">
					<image :src="$baseUrl(item.newimage)" mode=""></image>
					<view class="right">
						<view class="name">
							{{ item.title }}
						</view>
						<view class="time">
							{{ item.publishtime }}
						</view>
					</view>
				</view>
			</view>
			<view style="height: 150rpx;"></view>
		</view>

		<view class="container2" v-if="user_status != 2">
			<view class="cart" :style="{ padding: user_status < 6 ? '30rpx 60rpx' : '0rpx' }">
				<view class="item" @tap="$navTo('/pages/projectList/projectList')"
					v-if="user_status == 3 || user_status == 4 || user_status == 5 || user_status == 1">
					<image src="https://hfd.bjlzkj.com/static/index/cart1.png" mode=""></image>
					<view class="name">
						项目列表
					</view>
				</view>
				<view class="item" @tap="$navTo('/subpkg/userList/userList')" v-if="user_status == 3">
					<image src="https://hfd.bjlzkj.com/static/index/cart2.png" mode=""></image>
					<view class="name">
						客户管理
					</view>
				</view>
				<view class="item" @tap="$navTo('/pages/projectList/list')" v-if="user_status == 4">
					<image src="https://hfd.bjlzkj.com/static/index/cart2.png" mode=""></image>
					<view class="name">
						项目进度管理
					</view>
				</view>
				<view class="item" @tap="$navTo('/subpkg/invoice/invoiceList')" v-if="user_status == 5">
					<image src="https://hfd.bjlzkj.com/static/index/cart4.png" mode=""></image>
					<view class="name">
						开票管理
					</view>
				</view>
				<view class="item" @tap="$navTo('/pages/user/userlist')" v-if="user_status == 1">
					<image src="https://hfd.bjlzkj.com/static/index/icon2.png" mode=""></image>
					<view class="name">
						员工管理
					</view>
				</view>
				<view class="item" @tap="$navTo('/pages/ranking/ranking')" v-if="user_status == 1">
					<image src="https://hfd.bjlzkj.com/static/index/icon3.png" mode=""></image>
					<view class="name">
						积分榜
					</view>
				</view>
				<view class="item" @tap="$navTo('/pages/user/report')"
					v-if="user_status == 3 || user_status == 4 || user_status == 5">
					<image src="https://hfd.bjlzkj.com/static/index/cart3.png" mode=""></image>
					<view class="name">
						报告功能
					</view>
				</view>
			</view>

			<view class="card" v-if="user_status == 3">
				<view class="title">
					<view class="left">
						<view class="tiao"></view>
						<view class="name">
							项目列表
						</view>
					</view>
					<view class="right">
						更多
						<uni-icons type="right" size="24rpx" color="#C3C3C3"></uni-icons>
					</view>
				</view>
				<!-- 循环渲染每个项目 -->
				<view class="project-card" v-for="(project, index) in projectList.slice(0, 3)" :key="index">
					<!-- 项目名称和状态 -->
					<view class="project-header" @tap="$navTo('/subpkg/contract/contractState/contractState?id=' + project.id)">
						<text>{{ project.name }}</text>
						<text
							:class="['status-tag', project.status == 1 ? 'completed' : project.status == 2 ? 'ongoing' : project.status == 3 ? 'not-started' : '']">
							{{ project.status == 1 ? '已完成' : project.status == 2 ? '进行中' : project.status == 3 ? '未开始' :
							'' }}
						</text>
					</view>
					<!-- 负责人信息 -->
					<view class="project-detail">
						<view class="userbox" @tap="togglePhone('sale', index)">
							<view class="text">销售：{{ project.sale.name }}</view>
							<!-- 电话号码 -->
							<view class="phone-wrapper" v-if="showSalePhone[index]">
								<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
								</image>
								<text>{{ project.sale.mobile }}</text>
							</view>
						</view>
						<view class="userbox" @tap="togglePhone('technology', index)">
							<view class="text">技术：{{ project.technology.name }}</view>
							<!-- 电话号码 -->
							<view class="phone-wrapper" v-if="showTechnologyPhone[index]">
								<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
								</image>
								<text>{{ project.technology.mobile }}</text>
							</view>
						</view>
						<view class="userbox" @tap="togglePhone('finance', index)">
							<view class="text">财务：{{ project.finance.name }}</view>
							<!-- 电话号码 -->
							<view class="phone-wrapper" v-if="showFinancePhone[index]">
								<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
								</image>
								<text>{{ project.finance.mobile }}</text>
							</view>
						</view>
						<view class="userbox" @tap="togglePhone('executive', index)">
							<view class="text">行政：{{ project.executive.name }}</view>
							<!-- 电话号码 -->
							<view class="phone-wrapper" v-if="showExecutivePhone[index]">
								<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
								</image>
								<text>{{ project.executive.mobile }}</text>
							</view>
						</view>
					</view>
					<!-- 功能标签栏 -->
					<view class="tab-bar">
						<text class="tab-item"
							@tap="$navTo('/subpkg/contract/contractDetail/contractDetail?id=' + project.id)">合同详情</text>
						<text class="tab-item"
							@tap="$navTo('/subpkg/contract/contractState/contractState?id=' + project.id)">项目进度</text>
						<text class="tab-item"
							@tap="$navTo('/subpkg/contract/pay/pay?id=' + project.id)">付款情况</text>
						<text class="tab-item"
							@tap="$navTo('/subpkg/contract/contractOrder/contractOrder?id=' + project.id)">开票情况</text>
					</view>
				</view>
			</view>
			<view class="gong" v-if="user_status > 3 || user_status == 1">
				<view class="title">
					<view class="left">
						<view class="tiao"></view>
						<view class="name">
							常用功能
						</view>
					</view>
				</view>
				<view class="icons">
					<view class="item" v-for="(item, index) in icons" :key="index" @tap="go_url(item.url)">
						<image :src="item.image" mode=""></image>
						<view class="text">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="title">
					<view class="left">
						<view class="tiao"></view>
						<view class="name">
							数据简报
						</view>
					</view>
					<view class="right">
						<uni-data-select style="width: 200rpx;" v-model="changeTime" :localdata="dayList"
							@change="change"></uni-data-select>
						<!-- <uni-data-select style="width: 200rpx;" v-model="value" localdata=""
							@change="change"></uni-data-select> -->
					</view>
				</view>
				<view class="numList" v-if="user_status == 1">
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								新增客户
							</view>
							<view class="num">
								{{ nums.customer }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								新增合同
							</view>
							<view class="num">
								{{ nums.contract }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								合同额
							</view>
							<view class="num">
								{{ nums.contract_money }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								成交量
							</view>
							<view class="num">
								{{ nums.dealcontract }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								成交金额
							</view>
							<view class="num">
								{{ nums.receivables }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								未成交金额
							</view>
							<view class="num">
								{{ nums.unpaid_money }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
				</view>
				<view class="numList" v-if="user_status == 3 || user_status == 4">
					<view class="item" @tap="$navTo('/subpkg/bulletin/adduser')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								新增客户
							</view>
							<view class="num">
								{{ nums.customer }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/contractPrice')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								合同额
							</view>
							<view class="num">
								{{ nums.contract_money }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/entrycontract')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								入账额
							</view>
							<view class="num">
								{{ nums.receivables_money }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/contribution')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								贡献额
							</view>
							<view class="num">
								{{ nums.contribute_money }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/pay')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								已付款
							</view>
							<view class="num">
								{{ nums.pay_money }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/nopay')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								未付款
							</view>
							<view class="num">
								{{ nums.unpaid_money }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
				</view>
				<view class="numList" v-if="user_status == 5">
					<view class="item" @tap="$navTo('/subpkg/bulletin/pay')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								已付金额
							</view>
							<view class="num">
								{{ nums.paid_amount }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/nopay')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								未付金额
							</view>
							<view class="num">
								{{ nums.unpaid_amount }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/pedingpay')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								待付金额
							</view>
							<view class="num">
								{{ nums.consumption_amount }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/invoice?type=1')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								已开票金额
							</view>
							<view class="num">
								{{ nums.invoiced_amount }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/invoice?type=2')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								未开票金额
							</view>
							<view class="num">
								{{ nums.uninvoiced_amount }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item" @tap="$navTo('/subpkg/bulletin/invoice?type=3')">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								待开票金额
							</view>
							<view class="num">
								{{ nums.pending_invoice }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
				</view>
				<view class="numList" v-if="user_status == 6">
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								员工总人数
							</view>
							<view class="num">
								{{ nums.total }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								销售人数
							</view>
							<view class="num">
								{{ nums.sales }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								技术人数
							</view>
							<view class="num">
								{{ nums.tech }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								财务人数
							</view>
							<view class="num">
								{{ nums.finance }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								行政人数
							</view>
							<view class="num">
								{{ nums.admin }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
					<view class="item">
						<view class="yuan"></view>
						<view class="name-num">
							<view class="name">
								请假人数
							</view>
							<view class="num">
								{{ nums.leave }}
							</view>
						</view>
						<uni-icons type="right" color="#ccc" size="20rpx"></uni-icons>
					</view>
				</view>
			</view>
			<view class="card" v-if="user_status == 1">
				<view class="title">
					<view class="left">
						<view class="tiao"></view>
						<view class="name">
							业绩目标
						</view>
					</view>
				</view>
				<view class="numList">
					<view class="target-container">
						<circle-progress :percentage="target.completion_rate" diameter="100" line-width="12" canvas-id="myCanvas" />
						<view class="target-info">
							<view class="target-item">
								<text class="label">目标金额</text>
								<text class="value">¥{{ target.total_target }}</text>
							</view>
							<view class="target-item">
								<text class="label">完成金额</text>
								<text class="value completed">¥{{ target.completed_amount }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabBarView page="/pages/index/index" :status="user_status"></tabBarView>
	</view>
</template>

<script>

export default {
	data() {
		return {
			banner: [],
			current: 0,
			user_status: null, // 1超管，2用户，3销售，4技术，5财务，6行政
			dayList: [{
				value: 0,
				text: "月度"
			},
			{
				value: 1,
				text: "季度"
			},
			{
				value: 2,
				text: "年度"
			},
			],
			icons: [],
			selsectlist: [],
			userInfo: {},
			projectList: [],
			showSalePhone: [],
			showTechnologyPhone: [],
			showFinancePhone: [],
			showExecutivePhone: [],
			nums: {},
			changeTime: '',
			target: {}
		}
	},
	onLoad() {
		// 获取当前日期
		const currentDate = new Date();

		// 获取当前年份
		const currentYear = currentDate.getFullYear();

		// 获取当前月度
		const currentMonth = currentDate.getMonth() + 1; // getMonth()返回0-11，因此需要加1

		// 获取当前季度
		const currentQuarter = Math.ceil(currentMonth / 3);

		// 计算当前月份的开始日期和结束日期
		const startOfMonth = new Date(currentYear, currentMonth - 1, 1);
		const endOfMonth = new Date(currentYear, currentMonth, 0);

		// 计算当前季度的开始日期和结束日期
		const startOfQuarter = new Date(currentYear, (currentQuarter - 1) * 3, 1);
		const endOfQuarter = new Date(currentYear, currentQuarter * 3, 0);

		const startOfYear = new Date(currentYear, 0, 1); // 当年1月1日
		const endOfYear = new Date(currentYear, 11, 31); // 当年12月31日

		// 格式化输出
		const formatDate = (date) => {
			const year = date.getFullYear();
			const month = formatTime(date.getMonth() + 1);
			const day = formatTime(date.getDate());
			return `${year}-${month}-${day}`;
		};

		const formatTime = (time) => {
			return time < 10 ? '0' + time : time;
		};

		const startOfMonthStr = formatDate(startOfMonth);
		const endOfMonthStr = formatDate(endOfMonth);
		const startOfQuarterStr = formatDate(startOfQuarter);
		const endOfQuarterStr = formatDate(endOfQuarter);
		const startYearStr = formatDate(startOfYear);
		const endYearStr = formatDate(endOfYear);

		console.log('当前月份开始日期:', startOfMonthStr);
		console.log('当前月份结束日期:', endOfMonthStr);
		console.log('当前季度开始日期:', startOfQuarterStr);
		console.log('当前季度结束日期:', endOfQuarterStr);
		console.log('当前年度开始日期:', startOfYear);
		console.log('当前季度结束日期:', endOfQuarterStr);
		this.dayList[0].value = startOfMonthStr + ',' + endOfMonthStr
		this.dayList[1].value = startOfQuarterStr + ',' + endOfQuarterStr
		this.dayList[2].value = startYearStr + ',' + endYearStr
		this.changeTime = startOfMonthStr + ',' + endOfMonthStr
		// 在onLoad中立即获取用户状态
		this.userInfo = uni.getStorageSync('userInfo')
		this.user_status = this.userInfo?.role || 2
		this.initRoleBasedData()
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo')
		const newStatus = this.userInfo?.role
		if (newStatus !== this.user_status) {
			this.user_status = newStatus
			// 状态变化时重新初始化
			this.initRoleBasedData()
		}
		if (this.user_status == 1) {
			this.getIndexBriefing()
			this.getProgress()
		} else if (this.user_status == 2) {
			this.getbanner()
			this.getselection()
		} else if (this.user_status == 5) {
			this.getProjectList()
			this.getFinanceStatisticsCount()
			// 初始化显示状态数组
			this.projectList.forEach(() => {
				this.showSalePhone.push(false);
				this.showTechnologyPhone.push(false);
				this.showFinancePhone.push(false);
				this.showExecutivePhone.push(false);
			});
		} else if (this.user_status == 6) {
			this.getStaffBriefing()
		} else {
			this.getProjectList()
			this.getStaffStatisticsCount()
			// 初始化显示状态数组
			this.projectList.forEach(() => {
				this.showSalePhone.push(false);
				this.showTechnologyPhone.push(false);
				this.showFinancePhone.push(false);
				this.showExecutivePhone.push(false);
			});
		}
	},
	methods: {
		initRoleBasedData() {
			if (this.user_status == 1) {
				this.icons = [{
					name: '请假管理',
					image: 'https://hfd.bjlzkj.com/static/index/icon2.png',
					url: '/subpkg/attendance/leave'
				}, {
					name: '薪资',
					image: 'https://hfd.bjlzkj.com/static/index/icon1.png',
					url: '/subpkg/attendance/salary'
				}]
			}
			if (this.user_status == 4) {
				this.icons = [{
					name: '资料库',
					image: 'https://hfd.bjlzkj.com/static/index/box1.png',
					url: '/pages/dataBank/folder?category='
				}, {
					name: '收集箱',
					image: 'https://hfd.bjlzkj.com/static/index/box2.png',
					url: '/pages/dataBank/dataBank'
				}]
			}
			if (this.user_status == 5) {
				this.icons = [{
					name: '消息通知',
					image: 'https://hfd.bjlzkj.com/static/index/box3.png',
					url: '/pages/message/message'
				}, {
					name: '资料库',
					image: 'https://hfd.bjlzkj.com/static/index/box1.png',
					url: '/pages/dataBank/folder?category='
				}, {
					name: '收集箱',
					image: 'https://hfd.bjlzkj.com/static/index/box2.png',
					url: '/pages/dataBank/dataBank'
				},]
			}
			if (this.user_status == 6) {
				this.icons = [{
					name: '员工管理',
					image: 'https://hfd.bjlzkj.com/static/index/icon6.png',
					url: '/pages/user/userlist'
				}, {
					name: '积分榜',
					image: 'https://hfd.bjlzkj.com/static/index/icon3.png',
					url: '/pages/ranking/ranking'
				}, {
					name: '请假管理',
					image: 'https://hfd.bjlzkj.com/static/index/icon2.png',
					url: '/subpkg/attendance/leave'
				}, {
					name: '薪资',
					image: 'https://hfd.bjlzkj.com/static/index/icon1.png',
					url: '/subpkg/attendance/salary'
				},]
			}
		},
		swiperChange(event) {
			this.current = event.detail.current
		},
		change(e) {
			console.log(e)
			this.changeTime = e
			if (this.user_status == 5) {
				this.getFinanceStatisticsCount()
			} else if (this.user_status == 1) {
				this.getIndexBriefing()
				this.getProgress()
			} else if (this.user_status == 6) {
				this.getStaffBriefing()
			} else {
				this.getStaffStatisticsCount()
			}
		},
		onSearch(e) {
			console.log(e);
			uni.navigateTo({
				url: '/pages/index/search?keywords=' + e
			})
		},
		go_url(url) {
			uni.navigateTo({
				url: url
			})
		},
		// 获取销售技术行政的项目列表
		getProjectList() {
			this.$request('/addons/qingdong/project/getSelectList', 'GET').then(res => {
				this.projectList = res.data.data
			})
		},
		getProgress(){			
			this.$request('/addons/qingdong/achievement/getAchievementSummary', 'GET', {
				times: this.changeTime
			}).then(res => {
				console.log(res)
				this.target = res.data
			})
		},
		getIndexBriefing() {
			this.$request('/addons/qingdong/index/briefing', 'GET', {
				times: this.changeTime
			}).then(res => {
				console.log(res)
				this.nums = res.data
			})
		},
		// 获取数据简报
		getStaffStatisticsCount() {
			this.$request('/addons/qingdong/staff/getStaffStatisticsCount', 'GET', {
				times: this.changeTime
			}).then(res => {
				console.log(res)
				this.nums = res.data
			})
		},
		getStaffBriefing() {
			this.$request('/addons/qingdong/staff/getStaffBriefing', 'GET', {
				times: this.changeTime
			}).then(res => {
				console.log(res)
				this.nums = res.data
			})
		},
		getFinanceStatisticsCount() {
			this.$request('/addons/qingdong/staff/getFinanceBriefing', 'GET', {
				times: this.changeTime
			}).then(res => {
				console.log(res)
				this.nums = res.data
			})
		},
		getselection() {
			this.$request('/addons/qingdong/news/getSelectList', 'GET').then(res => {
				console.log(res)
				this.selsectlist = res.data.data
			})
		},
		getbanner() {
			this.$request('/addons/qingdong/banner/getSelectList', 'GET').then(res => {
				console.log(res)
				this.banner = res.data
			})
		},
		async getRole() {
			try {
				const res = await this.$request('/addons/qingdong/banner/getSelectList', 'GET');
				this.banner = res.data;
			} catch (error) {
				uni.showToast({ title: '获取用户角色失败', icon: 'none' });  // 新增失败提示
			}
		},
		togglePhone(role, index) {
			this.showSalePhone.fill(false);
			this.showTechnologyPhone.fill(false);
			this.showFinancePhone.fill(false);
			this.showExecutivePhone.fill(false);
			switch (role) {
				case 'sale':
					this.showSalePhone.splice(index, 1, !this.showSalePhone[index]);
					break;
				case 'technology':
					this.showTechnologyPhone.splice(index, 1, !this.showTechnologyPhone[index]);
					break;
				case 'finance':
					this.showFinancePhone.splice(index, 1, !this.showFinancePhone[index]);
					break;
				case 'executive':
					this.showExecutivePhone.splice(index, 1, !this.showExecutivePhone[index]);
					break;
				default:
					break;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.background {
	background: #F8F8F8;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -10;
}

.backimg {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}

.container {
	padding: 20rpx;
	box-sizing: border-box;

	.swiperbox {
		width: 100%;
		height: 334rpx;
		position: relative;

		.swiper {
			margin-top: 30rpx;
			border-radius: 30rpx;
			height: 100%;
			overflow: hidden;

			swiper-item {
				border-radius: 30rpx;
			}

			image {
				width: 100%;
				height: 100%;
				background: #0055ff;
				border-radius: 30rpx;
			}
		}

		.splic {
			width: 100%;
			height: 54rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.4);
			z-index: 10;
			display: flex;
			align-items: center;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;

			.text {
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: left;
			}

			.zhi {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.zhi-item1 {
					width: 8rpx;
					height: 8rpx;
					background: #989898;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}

				.zhi-item2 {
					width: 8rpx;
					height: 8rpx;
					background: #FFFFFF;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}
		}
	}

	.projectbox {
		width: 100%;
		height: 346rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.project {
			width: 48%;
			height: 100%;
			padding: 20rpx 40rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			background: linear-gradient(to bottom, #a3beff, #ffffff);
			position: relative;

			.title {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}

			.span {
				font-size: 28rpx;
				color: #999999;
				margin-top: 20rpx;
				text-align: left;
			}

			.right {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				left: 30rpx;
				bottom: 30rpx;
			}

			.form {
				position: absolute;
				width: 124rpx;
				height: 124rpx;
				right: 30rpx;
				bottom: 40rpx;
			}
		}

		.right {
			width: 48%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: inherit;
			align-content: space-between;

			.project2 {
				width: 100%;
				height: 48%;
				background: #fffaee;
				padding: 10rpx 40rpx;
				border-radius: 16rpx;
				box-sizing: border-box;
				position: relative;

				.title {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}

				.span {
					font-size: 28rpx;
					color: #999999;
					margin-top: 20rpx;
					text-align: left;
				}

				.right {
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					left: 30rpx;
					bottom: 10rpx;
				}

				.form {
					position: absolute;
					width: 100rpx;
					height: 100rpx;
					right: 0rpx;
					bottom: 0rpx;
				}
			}
		}
	}

	.cardList {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;

		.carditem {
			width: 214rpx;
			height: 218rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;

			.banner {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.title {
				position: relative;
				font-weight: bold;
				font-size: 26rpx;
				color: #333333;
				text-align: center;
			}

			.btn1 {
				width: 136rpx;
				height: 58rpx;
				line-height: 58rpx;
				background: #6058E0;
				color: #fff;
				font-size: 26rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}

			.btn2 {
				width: 136rpx;
				height: 58rpx;
				line-height: 58rpx;
				background: #2B87E3;
				color: #fff;
				font-size: 26rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}

			.btn3 {
				width: 136rpx;
				height: 58rpx;
				line-height: 58rpx;
				background: #0B9DA0;
				color: #fff;
				font-size: 26rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
		}
	}

	.jourList {
		width: 100%;
		background: #fff;
		border-radius: 16rpx;
		padding: 15rpx;
		box-sizing: border-box;

		.title {
			width: 100%;
			display: flex;
			font-weight: bold;
			align-items: center;
			justify-content: space-between;

			.cha {
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				background: #f0efef;
			}

			margin-bottom: 30rpx;
		}

		.item {
			margin-bottom: 20rpx;
			width: 100%;
			display: flex;
			align-items: center;

			image {
				width: 218rpx;
				height: 132rpx;
				border-radius: 10rpx;
				background: #ccc;
			}

			.right {
				padding-left: 20rpx;
				box-sizing: border-box;

				.name {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}

				.time {
					margin-top: 40rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;
				}
			}
		}
	}
}

.container2 {
	box-sizing: border-box;

	.cart {
		padding: 30rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item {
			text-align: center;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			.name {
				font-size: 26rpx;
				color: #333333;
			}
		}
	}

	.progressBox {
		position: relative;
		width: 168rpx;
		height: 168rpx;
		margin: 0 auto;
		margin-top: 33rpx;
		margin-left: 40rpx;
	}

	.centerTxt {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.num {
			font-size: 30rpx;
			font-family: Arial;
			font-weight: bold;
			color: #38393A;
		}

		.txt {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8A8B8B;
			margin-top: 10rpx;
		}

	}

	.target-container {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 30rpx;
		border-radius: 16rpx;
	}

	.target-info {
		flex: 1;
		padding-left: 40rpx;
		text-align: center;
	}

	.target-item {
		margin-bottom: 20rpx;

		.label {
			font-size: 28rpx;
			color: #666;
			margin-right: 20rpx;
		}

		.value {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;

			&.completed {
				color: #1B87E8;
			}
		}
	}

	.gong {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 22rpx;
		margin: 20rpx 0;
		box-sizing: border-box;

		.title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				color: #222222;
				font-size: 28rpx;

				.tiao {
					width: 6rpx;
					height: 22rpx;
					background: #1B87E8;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					margin-right: 12rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #B0B0B0;

				.uni-icons {
					margin-left: 10rpx;
				}

				::v-deep .uni-select {
					font-size: 24rpx;
				}
			}
		}

		.icons {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.item {
				margin-right: 60rpx;
				text-align: center;
				width: 25%;
				margin: 0px 0rpx;

				image {
					width: 47rpx;
					height: 47rpx;
				}

				.text {
					font-weight: normal;
					font-size: 24rpx;
					color: #222222;
					margin-top: 10rpx;
				}
			}
		}
	}

	.card {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 22rpx;
		margin: 20rpx 0;
		box-sizing: border-box;

		.title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				color: #F9AD00;
				font-size: 28rpx;

				.tiao {
					width: 6rpx;
					height: 22rpx;
					background: #F9AD00;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					margin-right: 12rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #B0B0B0;

				.uni-icons {
					margin-left: 10rpx;
				}

				::v-deep .uni-select {
					font-size: 24rpx;
					height: 28px;
				}

				::v-deep .uni-select__input-text {
					color: #1B87E8;
				}

				::v-deep .uni-select__input-placeholder {
					color: #6a6a6a;
					font-size: 12px;
				}
			}
		}

		.project-card {
			border-radius: 10rpx;
			overflow: hidden;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e8e8e8;

			.project-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				text {
					font-size: 32rpx;
					font-weight: bold;
				}

				.status-tag {
					border-radius: 10rpx;
					padding: 6rpx 12rpx;
					font-size: 24rpx;
					font-weight: bold;

					&.completed {
						background-color: rgba(0, 160, 105, 0.1);
						color: #00a069;
					}

					&.ongoing {
						background-color: rgba(0, 122, 255, 0.1);
						color: #007aff;
					}

					&.not-started {
						background-color: rgba(255, 58, 58, 0.1);
						color: #ff3a3a;
					}
				}
			}

			.project-detail {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.userbox {
					position: relative;
				}

				.phone-wrapper {
					position: absolute;
					bottom: -50rpx;
					left: 0;
					z-index: 10;
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					background: #fff;
					box-shadow: 0 2rpx 6rpx 2rpx #c1c1c1;
					padding: 3rpx 5rpx;
					box-sizing: 10rpx;

					.image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}

			.tab-bar {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.tab-item {
					width: 20%;
					text-align: center;
					padding: 8rpx 0;
					background-color: #e0f1ff;
					border-radius: 10rpx;
					color: #007aff;
					font-size: 24rpx;
				}
			}

		}

		.numList {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				width: 30%;
				height: 108rpx;
				background: #FBFBFB;
				border-radius: 12rpx;
				margin: 10rpx 0;
				padding: 24rpx 17rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.yuan {
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
					background: #DFF0FF;
				}

				.name-num {
					margin: 0 10rpx;

					.name {
						font-size: 21rpx;
						color: #333333;
					}

					.num {
						font-weight: normal;
						font-size: 28rpx;
						color: #222222;
					}
				}
			}
		}
	}
}
</style>